<!--
 * @Author: wangding
 * @Date: 2020-11-11 11:02:53
 * @LastEditTime: 2021-05-28 17:08:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\battery\battery.vue
-->
<template>
    <div class="battery-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('device-group-name')}}</span>
                <el-input v-model="vppGroup" style="width:160px;" :placeholder="$t('pleaseInput') "></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
            <div class="search-box-sub right">
                <el-button icon="el-icon-back" @click='()=>{this.$router.go(-1)}' >{{$t('back')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-plus'  @click="()=>{$store.commit('setNewVisibleGroup',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                :title="$t('index.delete_confirm')+'?'"
                :confirm-button-text="$t('sure')"
                :cancel-button-text="$t('cancel')"
                @confirm='upgradegroupDeleteBatch()'
            >
                <el-button type="" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
            </el-popconfirm>
            
            <!-- <a href="javascript:;" style="color:#3c8dbc;" @click='()=>{$router.push({path:"/deviceUpgrade"})}'> << {{$t('device-back-remote-update-index')}}</a> -->
            
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='true' @selection-change="handleSelectionChange($event)">
            <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit" :title="$t('edit')" @click='editUsers(data.sid)' ></el-button>
                    <el-popconfirm
                        :title="$t('index.delete_item_confirm')+'?'"
                        :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('cancel')"
                        @confirm='deleteSub(data.sid)'
                    >
                        <el-button type="" slot="reference" icon='el-icon-delete' :title="$t('delete')" ></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add @uploadData='query' v-if='newVisibleGroup'></add>
        <edit @uploadData='query' :groupId='groupId' v-if='newVisibleEdit'></edit>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../../../components/common/baseTable'
import add from './add'
import edit from './edit'
export default {
    components: {
        baseTable,
        add,
        edit
    },
    props: {

    },
    data() {
        return {
            vppGroup:'',
            current:1,
            size:10,
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title:  this.$t('device-group-name'),
                value: 'groupName',
                slot: 'groupName'
            },
            {
                title: this.$t('device-inv-nums'),
                value: 'equipmentNum',
                slot: 'equipmentNum'
            },
            {
                title: this.$t('createTime'),
                value: 'createTime',
                slot: 'createTime'
            },
            {
                title: this.$t('control'),
                value: 'option',
                slot: 'option'
            }],
            dictionary:{},
            selectList:[],
            groupId:''
        };
    },
    computed: {
        newVisibleEdit(){
            return this.$store.state.sysStore.newVisibleEdit
        },
        newVisibleGroup(){
            return this.$store.state.sysStore.newVisibleGroup
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.upgradegroupGetPage()
    },
    methods: {
        async deleteSub(id){
            let res =  await this.API.upgradegroupDeleteBatch({
                ids:id
            })
            if(this.comm.showMsg(res.success)){
                this.upgradegroupGetPage()
            }
        },
        editUsers(id){
            this.groupId = id
            this.$store.commit('setNewVisibleEdit',true)
        },
        async upgradegroupDeleteBatch(){
            let res =  await this.API.upgradegroupDeleteBatch({
                ids:this.selectList.map(item =>{return item.sid})
            })
            if(this.comm.showMsg(res.success)){
                this.upgradegroupGetPage()
            }
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'INVERTER_TYPES',
                lang:localStorage.getItem('lang')||'zh_CN'
            })
            this.dictionary = res || {}
        },
        async upgradegroupGetPage(){
            this.loading = true
            let res = await this.API.upgradegroupGetPage({
                groupName: this.vppGroup,
                currentTime:moment().format("YYYY-MM-DD"),
                current: this.current,
                size: this.size
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows
        },
        handleCurrentChange(val) {
          this.current = val
          this.upgradegroupGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.upgradegroupGetPage()
        },
        query(){
            this.current = 1
            this.upgradegroupGetPage()
        },
        handleSelectionChange(val){
            this.selectList = val
        }
    },
};
</script>

<style  lang="less" scoped>
.battery-main-box{
    .hover-a-link:hover{
        text-decoration: underline;
    }
}
</style>
